<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="" :style="{'background':kbackgroundColor2}" style="min-height: 100vh">
			<hx-navbar title="详情" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto">
			</hx-navbar>
			<view class="container"
				:class="[{'container-black':ktheme =='black'},{'container-purple':ktheme =='purple'}]">
				<view class="" :style="{'color':knormalColor}">
					<!-- 23 一类  145 一类 -->
					<!-- 1充值 2->提现失败 3->提现成功4->支出 5->收入 -->
					<view class="header" v-if="type==1">
						<view class="type_img" style="background: #434343;" v-if="ktheme != 'purple'">
							<image class="t_img" v-if="details.transactionStatus==1" src="@/static/user/wallet/pay.png"
								mode="">
							</image>
							<image class="t_img" v-if="details.transactionStatus==2 && details.type==2"
								src="@/static/user/wallet/full.png" mode="">
							</image>
							<image class="t_img" v-if="details.transactionStatus==2 && details.type==1 "
								src="@/static/user/wallet/withdraw_deposit.png" mode="">
							</image>
							<image class="t_img" v-if="details.transactionStatus==3" src="@/static/user/wallet/pay.png"
								mode="">
							</image>
						</view>
						<view class="type_img" style="background:#EEEEEE" v-if="ktheme != 'black'">
							<image class="t_img" v-if="details.transactionStatus==1"
								src="@/static/user/wallet/pay_black.png" mode="">
							</image>
							<image class="t_img" v-if="details.transactionStatus==2 && details.type==2"
								src="@/static/user/wallet/full_black.png" mode="">
							</image>
							<image class="t_img" v-if="details.transactionStatus==2 && details.type==1"
								src="@/static/user/wallet/wallet-cash-icon-white.png" mode=""></image>
							<image class="t_img" v-if="details.transactionStatus==3"
								src="@/static/user/wallet/pay_black.png" mode=""></image>
						</view>
						<view class="" v-if="details.type==1">
							<view class="title_name">提现申请</view>
							<view class="subtitle">
								<text v-if="details.transactionStatus==2">- </text>
								<text v-if="details.transactionStatus==3">+ </text>
								{{details.amount}}
							</view>
						</view>
						<view class="" v-if="details.type==2">
							<view class="title_name">充值申请</view>
							<view class="subtitle">
								<text v-if="details.transactionStatus==2">+</text>
								<text v-if="details.transactionStatus==3">-</text>
								{{details.amount}}
							</view>
						</view>
						<view class="content">
							<!-- type  1 提现  2  充值     transactionStatus  1： 处理中  2： 成功  3 :失败 -->
							<view class="title">当前状态：
								<text v-if="details.type==1">提现 </text>
								<text v-if="details.type==2">充值 </text>
								<text v-if="details.transactionStatus==1">处理中 </text>
								<text v-if="details.transactionStatus==2">成功 </text>
								<text v-if="details.transactionStatus==3">失败 </text>
							</view>
							<text class="title"  v-if="details.type==1">提现金额：¥{{details.amount}}</text>
								<text class="title"  v-if="details.type==2">充值金额：¥{{details.amount}}</text>
							<text class="title"
								v-if='(details.transactionStatus==1 || details.transactionStatus==2) && details.type==1'>手续费：￥{{details.feeAmt}}</text>
							<text class="title">申请时间：{{filterTime(details.createTime)}}</text>
							<text class="title" v-if='details.transactionStatus==3'>失败原因：{{details.cause}}</text>
							<text class="title" v-if="details.type==1">提现方式：{{details.bankName}}</text>
							<text class="title" v-if="details.type==1 && details.transactionStatus==2">提现单号：{{details.sn}}</text>
						</view>

					</view>
					<view class="header" v-if="type==2">
						<view class="type_img" style="background: #434343;" v-if="ktheme != 'purple'">
							<image class="t_img" v-if="info.changeType==1" src="@/static/user/wallet/pay.png" mode="">
							</image>
							<image class="t_img" v-if="info.changeType==2" src="@/static/user/wallet/pay.png" mode="">
							</image>
							<image class="t_img" v-if="info.changeType==3" src="@/static/user/wallet/more.png" mode="">
							</image>
							<image class="t_img" v-if="info.changeType==4" src="@/static/user/wallet/send.png" mode="">
							</image>
						</view>
						<view class="type_img" style="background:#EEEEEE" v-if="ktheme != 'black'">
							<image class="t_img" v-if="info.changeType==1" src="@/static/user/wallet/pay_black.png"
								mode="">
							</image>
							<image class="t_img" v-if="info.changeType==2" src="@/static/user/wallet/pay_black.png"
								mode="">
							</image>
							<image class="t_img" v-if="info.changeType==3" src="@/static/user/wallet/more_black.png"
								mode=""></image>
							<image class="t_img" v-if="info.changeType==4" src="@/static/user/wallet/send_black.png"
								mode=""></image>
						</view>
						<view class="">
							<view class="title_name">{{info.changeReason}}</view>
							<view class="subtitle">
								<text v-if="info.changeType==1 || info.changeType==4">+</text>
								<text v-if="info.changeType==2 || info.changeType==3">-</text>
								<text v-if="info.changeType==3 || info.changeType==4"> {{info.changeAmount}}</text>
								<text v-else>{{info.changeAmount}}</text>
							</view>
						</view>
						<view class="content">
							<text class="title" v-if="info.changeType==3">当前状态：支付成功</text>
							<text class="title" v-else>当前状态：{{info.changeReason}}</text>
								<text class="title" v-if="info.changeType==4">手续费：￥{{info.feeAmt}}</text>
							<text class="title">交易时间：{{filterTime(info.createTime)}}</text>
							<text class="title">订单编号：{{info.sn}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				details: {},
				info: {},
				ids: '',
				type: 1 //账号明细  账单明细
			}
		},
		onLoad(val) {
			this.ids = val.id
			this.type = val.type
			var ordersString = decodeURIComponent(val.list);
			if (this.type == 1) {
			this.getData()
			} else {
			this.info =JSON.parse(ordersString)
			this.getpayDetaile()
			}

		},
		onShow() {
			this.getData()
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			filterTime(val) {
				return this.$common.filterTime(val);
			},
			getpayDetaile() {
				//明细
				var data = {
					id: this.ids
				}
				this.$api.purseChangeDetail(this.ids, val => {
					if (val.status) {
						  this.info.feeAmt = val.data.feeAmt
					} else {
						this.$common.errorToShow(val.message)
					}

				})
			},
			getData() {
				//明细
				var data = {
					id: this.ids
				}
				this.$api.purseDetailXiang(this.ids, val => {
					if (val.status) {
						this.details = val.data
					} else {
						this.$common.errorToShow(val.message)
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 100vw;
		height: 100vh;
	}

	.container {
		margin: 40rpx 40rpx 0 40rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;

		.header {
			display: flex;
			flex-direction: column;
			align-items: center;
			// align-details: center;

			.type_img {
				margin-top: 40rpx;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;

				text-align: center;
			}

			.t_img {
				width: 60%;
				margin-top: 20rpx;
				height: 60%;
			}

			.title {
				margin-top: 40rpx;

				font-size: 30rpx;
			}

			.title_name {
				margin: 40rpx auto 10rpx;
				text-align: center;
				font-size: 30rpx;
			}

			.subtitle {
				text-align: center;
				margin-top: 20rpx;
				font-size: 36rpx;
			}
		}

		.content {
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			display: flex;
			flex-direction: column;
			padding: 0 40rpx;
			width: 660rpx;

			.title {
				font-size: 24rpx;
				color: #B5B5B5;
				margin-top: 10rpx;
			}
		}
	}

	.container-purple {
		background-color: #ffffff;
		border: 2rpx solid #AE2CF1;
	}

	.container-black {
		background-color: #1B1B1B;
		border: 2rpx solid transparent !important;
		background-clip: padding-box, border-box !important;
		background-origin: padding-box, border-box !important;
		background-image: linear-gradient(to bottom, #222, #222), linear-gradient(180deg, rgba(244, 249, 123, 1), rgba(84, 203, 122, 1)) !important;
	}
</style>